<template>
  <div class="cc_box">
    <div class="cc_update"><el-button type="primary" class="cc_btn1" @click="showF()">添加作业</el-button></div>
    <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="250"
          border
          >
          <el-table-column
            fixed
            prop="H_id"
            label="作业编号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="course_name"
            label="课程名"
            width="200">
          </el-table-column>
          <el-table-column
            prop="teacher_name"
            label="指导老师"
            width="200">
          </el-table-column>
          <el-table-column
            prop="finsh_time"
            label="完成时间"
            width="250">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200">
              <el-button
                type="text"
                size="small"
                @click="showHC()"
                >
                添加题目与答案
              </el-button>
          </el-table-column>
         </el-table>
         </div>
    <div class="cc_form" v-if="showForm">
        <el-form ref="form" :model="form" label-width="80px">
           <el-form-item label="作业编号">
             <el-input v-model="form.H_id"></el-input>
           </el-form-item>
           <el-form-item label="课程名">
             <el-input v-model="form.course_name"></el-input>
           </el-form-item>
           <el-form-item label="指导老师">
             <el-input v-model="form.teacher"></el-input>
           </el-form-item>
           <el-form-item label="完成时间">
             <el-input v-model="form.finsh_name"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">立即创建</el-button>
             <el-button @click="cancelF()">取消</el-button>
           </el-form-item>
        </el-form>
    </div>
    <div class="cc_form3" v-if="showHW">
      <div class="buttons">
        <el-button  @click="showone()">单选题</el-button>
        <el-button  @click="showtwo()">多选题</el-button>
      </div>
      <div class="questions" v-if="one1">
        <el-form ref="form" :model="OneForm" label-width="80px">
           <el-form-item label="单选题目">
             <el-input v-model="OneForm.o_name"></el-input>
           </el-form-item>
           <el-form-item label="A选项">
             <el-input v-model="OneForm.A"></el-input>
           </el-form-item>
           <el-form-item label="B选项">
             <el-input v-model="OneForm.B"></el-input>
           </el-form-item>
           <el-form-item label="C选项">
             <el-input v-model="OneForm.C"></el-input>
           </el-form-item>
           <el-form-item label="D选项">
             <el-input v-model="OneForm.D"></el-input>
           </el-form-item>
           <el-form-item label="答案">
             <el-input v-model="OneForm.answer"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">立即创建</el-button>
             <el-button @click="close_TC()">取消</el-button>
           </el-form-item>
        </el-form>
      </div>
      <div class="questions" v-if="two1">
        <el-form ref="form" :model="TwoForm" label-width="80px">
           <el-form-item label="多选题目">
             <el-input v-model="TwoForm.t_name"></el-input>
           </el-form-item>
           <el-form-item label="A选项">
             <el-input v-model="TwoForm.A"></el-input>
           </el-form-item>
           <el-form-item label="B选项">
             <el-input v-model="TwoForm.B"></el-input>
           </el-form-item>
           <el-form-item label="C选项">
             <el-input v-model="TwoForm.C"></el-input>
           </el-form-item>
           <el-form-item label="D选项">
             <el-input v-model="TwoForm.D"></el-input>
           </el-form-item>
           <el-form-item label="答案">
             <el-input v-model="TwoForm.answer"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">立即创建</el-button>
             <el-button @click="close_HC()">取消</el-button>
           </el-form-item>
        </el-form>
      </div>
      </div>
   </div>
</template>

<script>
export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      onSubmit() {
        console.log('submit!');
      },
      showF(){
        this.showForm = true
      },
      cancelF(){
        this.showForm = false
      },
      showHC(){
        this.showHW = true
      },
      close_HC(){
        this.showHW = false
      },
      showone(){
        this.one1 = true
        this.two1 = false
      },
      showtwo(){
        this.one1 = false
        this.two1 = true
      },
    },
    data() {
      return {
        tableData: [{
          H_id: '12',
          course_name: 'Java',
          teacher_name: '王虎',
          finsh_time: '2023年4月26日',
        }, {
          H_id: '10',
          course_name: 'C++',
          teacher_name: '李四',
          finsh_time: '2023年4月26日',
        },],
        form: {
          H_id:'',
          course_name: '',
          teacher:'',
          finsh_time:'',
        },
        //单选题目
        OneForm:{
          o_name:'',
          A:'',
          B:'',
          C:'',
          D:'',
          answer:''
        },
        //多选题目
        TwoForm:{
          t_name:'',
          A:'',
          B:'',
          C:'',
          D:'',
          answer:''
        },
        showForm : false,
        showHW:false,
        one1:false,
        two1:false
      }
    },

}
</script>

<style lang="scss" scoped>
  .cc_box{
    width: 100%;
    min-height: 500px;
    background-color: #f6f6f4;
    position: relative;
    .cc_update{
       position: relative;
       width: 100%;
       height: 80px;
       .cc_btn1{
        position: absolute;
        top: 10px;
        right: 20px;
       } 
    }
    .table{
       padding:10px;
    }
    .cc_form{
       position: absolute; 
       width: 50%;
       min-height: 350px;
       padding: 40px;
       box-sizing: border-box;
       background-color: white;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       z-index: 100;
       border-radius: 10px;
    }
     .cc_form3{
       position: absolute; 
       width: 50%;
       min-height: 400px;
       padding: 40px;
       box-sizing: border-box;
       background-color: white;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       z-index: 100;
       border-radius: 10px;
       .btn1{
        position: absolute;
        bottom: 10px;
        left: 35%;
       }
       .btn2{
        position: absolute;
        bottom: 10px;
        left: 50%;
       }
       .buttons{
         margin-bottom: 10px;
       }
    }
  }
</style>